<!doctype html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="vue.js,教程,前端,基础," />





  <link rel="alternate" href="/atom.xml" title="最阴郁的阳光" type="application/atom+xml" />




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="好吧~酱酱本来在看es6的promise，偶然发现了VUE.JS,一不小心看了下大概，发现还挺有趣。所以索性就先把promise撂在一边，去官网学习下vue.。当然我也不确定这个会更新到什么时候，哈哈。

vue的安装兼容性vue.js不支持ie8及其以下版本，支持所有兼容es5的浏览器。
npm$ npm install vue
命令行工具vue.js 提供一个官方的命令行工具，可以快速搭建单页">
<meta property="og:type" content="article">
<meta property="og:title" content="VUE官方教程随笔(基础篇)">
<meta property="og:url" content="https://xushuo.github.io/2017/03/23/VUE官方教程随笔(基础篇)/index.html">
<meta property="og:site_name" content="最阴郁的阳光">
<meta property="og:description" content="好吧~酱酱本来在看es6的promise，偶然发现了VUE.JS,一不小心看了下大概，发现还挺有趣。所以索性就先把promise撂在一边，去官网学习下vue.。当然我也不确定这个会更新到什么时候，哈哈。

vue的安装兼容性vue.js不支持ie8及其以下版本，支持所有兼容es5的浏览器。
npm$ npm install vue
命令行工具vue.js 提供一个官方的命令行工具，可以快速搭建单页">
<meta property="og:image" content="https://xushuo.github.io/images/vue/1.png">
<meta property="og:image" content="https://cn.vuejs.org/images/lifecycle.png">
<meta property="og:updated_time" content="2017-03-27T01:21:06.526Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="VUE官方教程随笔(基础篇)">
<meta name="twitter:description" content="好吧~酱酱本来在看es6的promise，偶然发现了VUE.JS,一不小心看了下大概，发现还挺有趣。所以索性就先把promise撂在一边，去官网学习下vue.。当然我也不确定这个会更新到什么时候，哈哈。

vue的安装兼容性vue.js不支持ie8及其以下版本，支持所有兼容es5的浏览器。
npm$ npm install vue
命令行工具vue.js 提供一个官方的命令行工具，可以快速搭建单页">
<meta name="twitter:image" content="https://xushuo.github.io/images/vue/1.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '91bf4c3a712203aac2c250cea3b0b98c',
      author: '表闹蛋蛋酱'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"查询","hits_empty":"查询无相关结果: ${query}","hits_stats":"${hits} 条结果,用时 ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://xushuo.github.io/2017/03/23/VUE官方教程随笔(基础篇)/"/>





  <title> VUE官方教程随笔(基础篇) | 最阴郁的阳光 </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?7e8851498eec67be493f9887c5c72501";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>










  
  
    
  

  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">最阴郁的阳光</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">I See You</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocapitalize="off" autocomplete="off" autocorrect="off"
             placeholder="搜索..." spellcheck="false"
             type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://xushuo.github.io/2017/03/23/VUE官方教程随笔(基础篇)/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="表闹蛋蛋酱">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="最阴郁的阳光">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                VUE官方教程随笔(基础篇)
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-03-23T11:36:54+08:00">
                2017-03-23
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/教程/" itemprop="url" rel="index">
                    <span itemprop="name">教程</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2017/03/23/VUE官方教程随笔(基础篇)/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="2017/03/23/VUE官方教程随笔(基础篇)/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/2017/03/23/VUE官方教程随笔(基础篇)/" class="leancloud_visitors" data-flag-title="VUE官方教程随笔(基础篇)">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">阅读次数 </span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>
            </span>
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>好吧~酱酱本来在看es6的promise，偶然发现了VUE.JS,一不小心看了下大概，发现还挺有趣。所以索性就先把promise撂在一边，去官网学习下vue<em>.</em>。当然我也不确定这个会更新到什么时候，哈哈。</p>
<hr>
<h2 id="vue的安装"><a href="#vue的安装" class="headerlink" title="vue的安装"></a>vue的安装</h2><h3 id="兼容性"><a href="#兼容性" class="headerlink" title="兼容性"></a>兼容性</h3><p>vue.js不支持ie8及其以下版本，支持所有兼容es5的浏览器。</p>
<h3 id="npm"><a href="#npm" class="headerlink" title="npm"></a>npm</h3><p><code>$ npm install vue</code></p>
<h3 id="命令行工具"><a href="#命令行工具" class="headerlink" title="命令行工具"></a>命令行工具</h3><p>vue.js 提供一个官方的命令行工具，可以快速搭建单页面应用，我们先用他来测试下。</p>
<pre><code># 全局安装 vue-cli
$ npm install --g vue-cli
# 创建一个基于webpack模板的项目
$ vue init webpack job
# 安装依赖
$ cd job
$ npm install 
$npm run dev
</code></pre><p><img src="/images/vue/1.png" alt=""><br>上面这个就是我初步测试的一个项目,当然这个是没有路由的，init的时候会有选项，可以产生更多的功能以及模块</p>
<h2 id="vue-js的初步体验"><a href="#vue-js的初步体验" class="headerlink" title="vue.js的初步体验"></a>vue.js的初步体验</h2><h3 id="hello-world"><a href="#hello-world" class="headerlink" title="hello world"></a>hello world</h3><pre><code>&lt;div id=&quot;app&quot;&gt;
  {{ message }}
&lt;/div&gt;

var app = new Vue({
  el: &apos;#app&apos;,
  data: {
    message: &apos;Hello Vue!&apos;
  }
})
</code></pre><p>vue提供了数据和dom的绑定，当代码更改，页面就会更新。有点类似于webpack的热加载和angularjs。</p>
<h3 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h3><p>机智的我从官网上偷来了这个图，看起来灰常长~长~长~~~<br>所以，我就不解释了，很·清晰·<br><img src="https://cn.vuejs.org/images/lifecycle.png" alt=""></p>
<h2 id="vue-js-模板语法"><a href="#vue-js-模板语法" class="headerlink" title="vue.js 模板语法"></a>vue.js 模板语法</h2><pre><code>之后我就使用官方的title了，毕竟只是随笔，摘抄总结些知识点
</code></pre><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><ul>
<li>文本 mustache ： <code>&lt;span&gt;Message: &lt;/span&gt;</code> </li>
<li>如果为一次性插入，则为  <code>&lt;span v-once&gt;This will never change: &lt;/span&gt;</code></li>
<li>纯html： <code>&lt;div v-html=&quot;rawHtml&quot;&gt;&lt;/div&gt;</code></li>
<li>文本 <code>v-text=“msg”</code> 等价于 <code></code></li>
<li>绑定属性： v-bind <code>&lt;div v-bind:id=&quot;dynamicId&quot;&gt;&lt;/div&gt;</code></li>
<li>js表达式： <code>NaN</code> <code>&lt;div v-bind:id=&quot; &#39;list&#39; +id &quot;&gt;&lt;/div&gt;</code></li>
<li>绑定事件 v-on  <code>&lt;a v-on:click=&quot;event&quot;&gt;&lt;/a&gt;</code></li>
<li><p>过滤器<br> 1.过滤器函数总是接受表达式的第一个值作为第一个参数，表达式的参数则从第二个开始。<br> 可以添加多个表达式。</p>
<p> 2.过滤器可以用到两个地方 mustache 插值以及v-bind 表达式</p>
</li>
</ul>
<pre><code>{{ item.label | filter(''123') }}
filters:{
      filter(val,arg1){
        if(!val) return &apos;&apos;;
        val=val.toString();
        return val.charAt(0).toUpperCase()+val.slice(1);
      }
    }
arg1 = 123 
</code></pre><ul>
<li>缩写 <ol>
<li>v-on  <code>&lt;a @click=&quot;doSomething&quot;&gt;&lt;/a&gt;</code></li>
<li>v-bind   <code>&lt;a :href=&quot;url&quot;&gt;&lt;/a&gt;</code></li>
</ol>
</li>
</ul>
<h3 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h3><p>计算属性不需要再data里声明，依赖于data里面的数据，并且自动更新。计算属性只有在它的相关依赖发生改变时才会重新求值</p>
<pre><code>&lt;h4&gt;{{ computedMsg }}&lt;/h4&gt;
computed:{
  computedMsg(){
      return this.newItem.split(&apos;&apos;).reverse().join(&apos;&apos;);
  }
}
</code></pre><h3 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h3><p>监听items的值，当发生变化，则调用handler函数。</p>
<pre><code>watch : {
      items : {
        handler(oldVal, newVal){
          Store.save(newVal);
        },
        deep : true
      }
    },
</code></pre><h2 id="CLass与Style的绑定"><a href="#CLass与Style的绑定" class="headerlink" title="CLass与Style的绑定"></a>CLass与Style的绑定</h2><h3 id="绑定html-class"><a href="#绑定html-class" class="headerlink" title="绑定html class"></a>绑定html class</h3><h4 id="class-v-bind"><a href="#class-v-bind" class="headerlink" title="class   v-bind"></a>class   v-bind</h4><p><code>&lt;div v-bind:class=&quot;{ active: isActive }&quot;&gt;&lt;/div&gt;</code><br> class ’active‘ 的更新取决于 isActive的 true or false<br>  多个class用 逗号 ,  分隔<br> 计算属性的应用：</p>
<pre><code>&lt;div v-bind:class=&quot;classObject&quot;&gt;&lt;/div&gt;
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive &amp;&amp; !this.error,
      &apos;text-danger&apos;: this.error &amp;&amp; this.error.type === &apos;fatal&apos;,
    }
  }
}
</code></pre><p> 多个class，数组形式表现</p>
<pre><code>&lt;div v-bind:class=&quot;[activeClass, errorClass]&quot;&gt;
data: {
  activeClass: &apos;active&apos;,
  errorClass: &apos;text-danger&apos;
}
渲染为:
&lt;div class=&quot;active text-danger&quot;&gt;&lt;/div&gt;    
</code></pre><h4 id="style-v-bind"><a href="#style-v-bind" class="headerlink" title="style v-bind"></a>style v-bind</h4><pre><code>&lt;div v-bind:style=&quot;{ color: activeColor, fontSize: fontSize + &apos;px&apos; }&quot;&gt;&lt;/div&gt;
data: {
  activeColor: &apos;red&apos;,
  fontSize: 30
}
OR 直接绑定
&lt;div v-bind:style=&quot;styleObject&quot;&gt;&lt;/div&gt;
data: {
  styleObject: {
    color: &apos;red&apos;,
    fontSize: &apos;13px&apos;
  }
}
</code></pre><h2 id="条件渲染"><a href="#条件渲染" class="headerlink" title="条件渲染   "></a>条件渲染   </h2><h3 id="v-if"><a href="#v-if" class="headerlink" title="v-if"></a>v-if</h3><p>条件判断</p>
<pre><code>&lt;h1 v-if=&quot;ok&quot;&gt;YES&lt;/h1&gt;
&lt;h1 v-else&gt;NO&lt;/h1&gt;
</code></pre><p>切换多个元素，可以用 template</p>
<pre><code>&lt;template v-if=&quot;ok&quot;&gt;
    &lt;span&gt;s1&lt;/span&gt;
    &lt;span&gt;s2&lt;/span&gt;
&lt;/template&gt;
</code></pre><p>if = v-if<br>else if = v-else-if<br>else = v-else</p>
<h3 id="key管理可复用元素"><a href="#key管理可复用元素" class="headerlink" title="key管理可复用元素"></a>key管理可复用元素</h3><p>如果用条件语句切换同一个元素的时候，改元素将不会替换掉，只会替换掉相对应的属性。<br>如果需要替换，需要添加key</p>
<pre><code>&lt;template v-if=&quot;loginType === &apos;username&apos;&quot;&gt;
  &lt;label&gt;Username&lt;/label&gt;
  &lt;input placeholder=&quot;Enter your username&quot; key=&quot;username-input&quot;&gt;
&lt;/template&gt;
&lt;template v-else&gt;
  &lt;label&gt;Email&lt;/label&gt;
  &lt;input placeholder=&quot;Enter your email address&quot; key=&quot;email-input&quot;&gt;
&lt;/template&gt;
</code></pre><h3 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a>v-show</h3><ul>
<li>v-show 不支持 template语法</li>
<li>v-show css的属性 display的切换  v-if涉及到元素的创建以及销毁</li>
</ul>
<h2 id="列表渲染"><a href="#列表渲染" class="headerlink" title="列表渲染"></a>列表渲染</h2><h3 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h3><p>item in items  语法渲染  也可以用  item of items</p>
<pre><code>&lt;ul id=&quot;example-2&quot;&gt;
  &lt;li v-for=&quot;(item, index) in items&quot;&gt;
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre><ul>
<li>v-for 支持template标签</li>
<li>v-for 支持遍历对象<br>参数分别为 value key index </li>
</ul>
<pre><code>&lt;p v-for=&quot;(val, key , index) in object&quot;&gt;{{ index+" : "+key+" - "+val }}&lt;/p&gt;
</code></pre><ul>
<li>v-for支持取整数<br><code>&lt;span v-for=&quot;n in 10&quot;&gt;&lt;/span&gt;</code></li>
</ul>
<h3 id="数组变更检测"><a href="#数组变更检测" class="headerlink" title="数组变更检测"></a>数组变更检测</h3><ul>
<li>以下两种情况，vue不能检测变动而的数组<br>1.当你利用索引直接设置一个项时，例如： <code>vm.items[indexOfItem] = newValue</code><br>2.当你修改数组的长度时，例如： <code>vm.items.length = newLength</code><br>解决办法：</li>
</ul>
<pre><code>1： Vue.set(example1.items, indexOfItem, newValue)
    example1.items.splice(indexOfItem, 1, newValue)
2： example1.items.splice(newLength)
</code></pre><h2 id="时间处理器"><a href="#时间处理器" class="headerlink" title="时间处理器"></a>时间处理器</h2><h3 id="监听事件"><a href="#监听事件" class="headerlink" title="监听事件"></a>监听事件</h3><p>v-on监听<br>也可以直接用vue的实例调用。</p>
<pre><code>var vm = new Vue({
    method:{
         hello(){
         }
    }
})；
vm.hello();
</code></pre><h2 id="表单控件绑定"><a href="#表单控件绑定" class="headerlink" title="表单控件绑定"></a>表单控件绑定</h2><h3 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h3><p>v-model 可以绑定文本值<br>checkbox：<code>&lt;input type=&quot;checkbox&quot; id=&quot;checkbox&quot; v-model=&quot;checked&quot;&gt;</code><br>radio： <code>&lt;input type=&quot;radio&quot; id=&quot;one&quot; value=&quot;One&quot; v-model=&quot;picked&quot;&gt;</code><br>select： <code>&lt;select v-model=&quot;selected&quot;&gt;</code><br>v-model绑定的是标签的value<br>还可以更改绑定耳朵value。 v-bind<br><code>&lt;input  type=&quot;checkbox&quot;  v-model=&quot;toggle&quot;  v-bind:true-value=&quot;a&quot;  v-bind:false-value=&quot;b&quot; &gt;</code><br><code>&lt;input type=&quot;radio&quot; v-model=&quot;pick&quot; v-bind:value=&quot;a&quot;&gt;</code><br>过滤收尾空格： <code>&lt;input v-model.trim=&quot;msg&quot;&gt;</code></p>
<h2 id="组件-component"><a href="#组件-component" class="headerlink" title="组件 component"></a>组件 component</h2><h3 id="注册"><a href="#注册" class="headerlink" title="注册"></a>注册</h3><p>命名尽量遵守W3C规则(小写并包含一个短杠)</p>
<pre><code>#注册全局组件
Vue.component(&apos;&apos;my-componetn&apos;,{
    template: &apos;&lt;div&gt;hello&lt;/div&gt;&apos;
});
#局部注册
new Vue({
  components:{
    &apos;my-btn&apos;: {
        data(){
           return {
             id: 10
           }
         }, 
        template: &apos;&lt;button v-on:click=&quot;id++&quot;&gt;{{ id }}&lt;/button&gt;&apos;
      }
  }
})
</code></pre><h3 id="组件传递数据"><a href="#组件传递数据" class="headerlink" title="组件传递数据"></a>组件传递数据</h3><h4 id="prop"><a href="#prop" class="headerlink" title="prop"></a>prop</h4><p>子组件用 props 声明所需的<strong>字符串</strong>   </p>
<pre><code>Vue.component(&apos;child&apos;, {
  // 声明 props
  props: [&apos;message&apos;],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: &apos;&lt;span&gt;{{ message }}&lt;/span&gt;&apos;
})
#传值 
&lt;child message=&quot;hello!&quot;&gt;&lt;/child&gt;       
</code></pre><blockquote>
<p><strong>Note:</strong></p>
<ul>
<li>HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名</li>
</ul>
</blockquote>
<pre><code>Vue.component(&apos;child&apos;, {
  // camelCase in JavaScript
  props: [&apos;myMessage&apos;],
  template: &apos;&lt;span&gt;{{ myMessage }}&lt;/span&gt;&apos;
})
&lt;!-- kebab-case in HTML --&gt;
&lt;child my-message=&quot;hello!&quot;&gt;&lt;/child&gt;
</code></pre><ul>
<li>如果需要动态传值，绑定父子关系 <strong>单项绑定</strong>，则用 v-bind:my-mysssage 。</li>
<li>子组件不应该在内部改变prop。</li>
</ul>
<pre><code>① ： 定义一个局部变量，并用 prop 的值初始化它：
props: [&apos;initialCounter&apos;],
data: function () {
  return { counter: this.initialCounter }
}
② ： 定义一个计算属性，处理 prop 的值并返回。
props: [&apos;size&apos;],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}
</code></pre><blockquote>
<p><strong>Tip:</strong> 注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。</p>
</blockquote>
<h4 id="自定义事件"><a href="#自定义事件" class="headerlink" title="自定义事件"></a>自定义事件</h4><p>   vue的事件接口</p>
<ul>
<li>$on(eventName) 监听事件</li>
<li>$emit(eventName) 触发事件</li>
</ul>
<pre><code>&lt;div id=&quot;counter-event-example&quot;&gt;
  &lt;p&gt;{{ total }}&lt;/p&gt;
  &lt;button-counter v-on:increment=&quot;incrementTotal&quot;&gt;&lt;/button-counter&gt;
  &lt;button-counter v-on:increment=&quot;incrementTotal&quot;&gt;&lt;/button-counter&gt;
&lt;/div&gt;
Vue.component(&apos;button-counter&apos;, {
  template: &apos;&lt;button v-on:click=&quot;increment&quot;&gt;{{ counter }}&lt;/button&gt;&apos;,
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit(&apos;increment&apos;)
    }
  },
})
new Vue({
  el: &apos;#counter-event-example&apos;,
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</code></pre><h4 id="非父子组件间通信"><a href="#非父子组件间通信" class="headerlink" title="非父子组件间通信"></a>非父子组件间通信</h4><ul>
<li>如果简单情况下，可以使用一个空的Vue实例作为中央事件总线</li>
</ul>
<pre><code>var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit(&apos;id-selected&apos;, 1)
// 在组件 B 创建的钩子中监听事件
bus.$on(&apos;id-selected&apos;, function (id) {
  // ...
})
</code></pre><h4 id="使用slot分发内容"><a href="#使用slot分发内容" class="headerlink" title="使用slot分发内容"></a>使用slot分发内容</h4><h5 id="单个slot"><a href="#单个slot" class="headerlink" title="单个slot"></a>单个slot</h5><p>除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。</slot></p>
<pre><code>假定 my-component 组件有下面模板：
&lt;div&gt;
  &lt;h2&gt;我是子组件的标题&lt;/h2&gt;
  &lt;slot&gt;
    只有在没有要分发的内容时才会显示。
  &lt;/slot&gt;
&lt;/div&gt;
父组件模版：
&lt;div&gt;
  &lt;h1&gt;我是父组件的标题&lt;/h1&gt;
  &lt;my-component&gt;
    &lt;p&gt;这是一些初始内容&lt;/p&gt;
    &lt;p&gt;这是更多的初始内容&lt;/p&gt;
  &lt;/my-component&gt;
&lt;/div&gt;
渲染结果：
&lt;div&gt;
  &lt;h1&gt;我是父组件的标题&lt;/h1&gt;
  &lt;div&gt;
    &lt;h2&gt;我是子组件的标题&lt;/h2&gt;
    &lt;p&gt;这是一些初始内容&lt;/p&gt;
    &lt;p&gt;这是更多的初始内容&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre><h5 id="具名slot"><a href="#具名slot" class="headerlink" title="具名slot"></a>具名slot</h5><p><slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。<br>仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。</slot></p>
<pre><code>例如，假定我们有一个 app-layout 组件，它的模板为：
&lt;div class=&quot;container&quot;&gt;
  &lt;header&gt;
    &lt;slot name=&quot;header&quot;&gt;&lt;/slot&gt;
  &lt;/header&gt;
  &lt;main&gt;
    &lt;slot&gt;&lt;/slot&gt;
  &lt;/main&gt;
  &lt;footer&gt;
    &lt;slot name=&quot;footer&quot;&gt;&lt;/slot&gt;
  &lt;/footer&gt;
&lt;/div&gt;
父组件模版：
&lt;app-layout&gt;
  &lt;h1 slot=&quot;header&quot;&gt;这里可能是一个页面标题&lt;/h1&gt;
  &lt;p&gt;主要内容的一个段落。&lt;/p&gt;
  &lt;p&gt;另一个主要段落。&lt;/p&gt;
  &lt;p slot=&quot;footer&quot;&gt;这里有一些联系信息&lt;/p&gt;
&lt;/app-layout&gt;
渲染结果为：
&lt;div class=&quot;container&quot;&gt;
  &lt;header&gt;
    &lt;h1&gt;这里可能是一个页面标题&lt;/h1&gt;
  &lt;/header&gt;
  &lt;main&gt;
    &lt;p&gt;主要内容的一个段落。&lt;/p&gt;
    &lt;p&gt;另一个主要段落。&lt;/p&gt;
  &lt;/main&gt;
  &lt;footer&gt;
    &lt;p&gt;这里有一些联系信息&lt;/p&gt;
  &lt;/footer&gt;
&lt;/div&gt;
</code></pre><h4 id="动态组件"><a href="#动态组件" class="headerlink" title="动态组件"></a>动态组件</h4><p>is 特性。多个组件使用同一个挂载点，并且动态切换</p>
<pre><code>var vm = new Vue({
  el: &apos;#example&apos;,
  data: {
    currentView: &apos;home&apos;
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})
&lt;component v-bind:is=&quot;currentView&quot;&gt;
  &lt;!-- 组件在 vm.currentview 变化时改变！ --&gt;
&lt;/component&gt;    
</code></pre><h5 id="keep-alive"><a href="#keep-alive" class="headerlink" title="keep-alive"></a>keep-alive</h5><p>动态切换组件的状态缓存保留</p>
<pre><code>&lt;keep-alive&gt;
  &lt;component :is=&quot;currentView&quot;&gt;
    &lt;!-- 非活动组件将被缓存！ --&gt;
  &lt;/component&gt;
&lt;/keep-alive&gt;
</code></pre><p>####编写可复用组件<br> 在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。</p>
<p> Vue 组件的 API 来自三部分 - props, events 和 slots ：   </p>
<ul>
<li>Props 允许外部环境传递数据给组件</li>
<li>Events 允许组件触发外部环境的副作用</li>
<li>Slots 允许外部环境将额外的内容组合在组件中。<br>使用 v-bind 和 v-on 的简写语法，模板的缩进清楚且简洁：  </li>
</ul>
<pre><code>&lt;my-component
  :foo=&quot;baz&quot;
  :bar=&quot;qux&quot;
  @event-a=&quot;doThis&quot;
  @event-b=&quot;doThat&quot;
&gt;
  &lt;img slot=&quot;icon&quot; src=&quot;...&quot;&gt;
  &lt;p slot=&quot;main-text&quot;&gt;Hello!&lt;/p&gt;
&lt;/my-component&gt;
</code></pre><hr>
<p>好了，经过艰苦卓绝的探索实践过程，Vue官方教程的基础篇完成了。其实组件还有一些杂项，不过大多属于心得方面的吧，以后开发可以参考。<br>经过这次Vue的探索之旅，真实良心官方教程啊。外国的坑爹教程，目不忍视。<br>不管怎么样，基础里面还有一些涉及到进阶篇的内容。之后会补充上。<br>好了，起飞！</p>
<hr>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/vue-js/" rel="tag"># vue.js</a>
          
            <a href="/tags/教程/" rel="tag"># 教程</a>
          
            <a href="/tags/前端/" rel="tag"># 前端</a>
          
            <a href="/tags/基础/" rel="tag"># 基础</a>
          
        </div>
      

      
        
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/03/17/来谈谈Promise/" rel="next" title="来谈谈Promise">
                <i class="fa fa-chevron-left"></i> 来谈谈Promise
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/03/27/VUE官方教程随笔-进阶篇/" rel="prev" title="VUE官方教程随笔(进阶篇)">
                VUE官方教程随笔(进阶篇) <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        <div class="ds-share flat" data-thread-key="2017/03/23/VUE官方教程随笔(基础篇)/"
     data-title="VUE官方教程随笔(基础篇)"
     data-content=""
     data-url="https://xushuo.github.io/2017/03/23/VUE官方教程随笔(基础篇)/">
  <div class="ds-share-inline">
    <ul  class="ds-share-icons-16">

      <li data-toggle="ds-share-icons-more"><a class="ds-more" href="javascript:void(0);">分享到：</a></li>
      <li><a class="ds-weibo" href="javascript:void(0);" data-service="weibo">微博</a></li>
      <li><a class="ds-qzone" href="javascript:void(0);" data-service="qzone">QQ空间</a></li>
      <li><a class="ds-qqt" href="javascript:void(0);" data-service="qqt">腾讯微博</a></li>
      <li><a class="ds-wechat" href="javascript:void(0);" data-service="wechat">微信</a></li>

    </ul>
    <div class="ds-share-icons-more">
    </div>
  </div>
</div>
      
    </div>
  </div>

          
          </div>
          


          
  <div class="comments" id="comments">
    
      <div class="ds-thread" data-thread-key="2017/03/23/VUE官方教程随笔(基础篇)/"
           data-title="VUE官方教程随笔(基础篇)" data-url="https://xushuo.github.io/2017/03/23/VUE官方教程随笔(基础篇)/">
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.jpg"
               alt="表闹蛋蛋酱" />
          <p class="site-author-name" itemprop="name">表闹蛋蛋酱</p>
           
              <p class="site-description motion-element" itemprop="description">天地不仁以万物为刍狗</p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/archives">
                <span class="site-state-item-count">7</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/categories/index.html">
                <span class="site-state-item-count">4</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">13</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/xushuo" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.zhihu.com/people/xiu-xiu-xiu-fei-qi" target="_blank" title="知乎">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#vue的安装"><span class="nav-number">1.</span> <span class="nav-text">vue的安装</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#兼容性"><span class="nav-number">1.1.</span> <span class="nav-text">兼容性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#npm"><span class="nav-number">1.2.</span> <span class="nav-text">npm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#命令行工具"><span class="nav-number">1.3.</span> <span class="nav-text">命令行工具</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-js的初步体验"><span class="nav-number">2.</span> <span class="nav-text">vue.js的初步体验</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#hello-world"><span class="nav-number">2.1.</span> <span class="nav-text">hello world</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#生命周期"><span class="nav-number">2.2.</span> <span class="nav-text">生命周期</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-js-模板语法"><span class="nav-number">3.</span> <span class="nav-text">vue.js 模板语法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#语法"><span class="nav-number">3.1.</span> <span class="nav-text">语法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#计算属性"><span class="nav-number">3.2.</span> <span class="nav-text">计算属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#watch"><span class="nav-number">3.3.</span> <span class="nav-text">watch</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CLass与Style的绑定"><span class="nav-number">4.</span> <span class="nav-text">CLass与Style的绑定</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#绑定html-class"><span class="nav-number">4.1.</span> <span class="nav-text">绑定html class</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#class-v-bind"><span class="nav-number">4.1.1.</span> <span class="nav-text">class   v-bind</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#style-v-bind"><span class="nav-number">4.1.2.</span> <span class="nav-text">style v-bind</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#条件渲染"><span class="nav-number">5.</span> <span class="nav-text">条件渲染   </span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#v-if"><span class="nav-number">5.1.</span> <span class="nav-text">v-if</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#key管理可复用元素"><span class="nav-number">5.2.</span> <span class="nav-text">key管理可复用元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#v-show"><span class="nav-number">5.3.</span> <span class="nav-text">v-show</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#列表渲染"><span class="nav-number">6.</span> <span class="nav-text">列表渲染</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#v-for"><span class="nav-number">6.1.</span> <span class="nav-text">v-for</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组变更检测"><span class="nav-number">6.2.</span> <span class="nav-text">数组变更检测</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#时间处理器"><span class="nav-number">7.</span> <span class="nav-text">时间处理器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#监听事件"><span class="nav-number">7.1.</span> <span class="nav-text">监听事件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#表单控件绑定"><span class="nav-number">8.</span> <span class="nav-text">表单控件绑定</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#v-model"><span class="nav-number">8.1.</span> <span class="nav-text">v-model</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#组件-component"><span class="nav-number">9.</span> <span class="nav-text">组件 component</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#注册"><span class="nav-number">9.1.</span> <span class="nav-text">注册</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#组件传递数据"><span class="nav-number">9.2.</span> <span class="nav-text">组件传递数据</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#prop"><span class="nav-number">9.2.1.</span> <span class="nav-text">prop</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#自定义事件"><span class="nav-number">9.2.2.</span> <span class="nav-text">自定义事件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#非父子组件间通信"><span class="nav-number">9.2.3.</span> <span class="nav-text">非父子组件间通信</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#使用slot分发内容"><span class="nav-number">9.2.4.</span> <span class="nav-text">使用slot分发内容</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#单个slot"><span class="nav-number">9.2.4.1.</span> <span class="nav-text">单个slot</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#具名slot"><span class="nav-number">9.2.4.2.</span> <span class="nav-text">具名slot</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#动态组件"><span class="nav-number">9.2.5.</span> <span class="nav-text">动态组件</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#keep-alive"><span class="nav-number">9.2.5.1.</span> <span class="nav-text">keep-alive</span></a></li></ol></li></ol></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">表闹蛋蛋酱</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Muse
  </a>
</div>


        

<div class="busuanzi-count">

  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">本站访客数<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>人次</span>
  

  
    <span class="site-pv">本站总访问量<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>次</span>
  
  
</div>



        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    
    
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  




  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"xushuo"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
      
      <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
      <script src="/js/src/hook-duoshuo.js?v=5.1.0"></script>
    
    
    <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  













  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
      search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.popup').toggle();
    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';
      $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = $( "entry", xmlResponse ).map(function() {
            return {
              title: $( "title", this ).text(),
              content: $("content",this).text(),
              url: $( "url" , this).text()
            };
          }).get();
          var $input = document.getElementById(search_id);
          var $resultContent = document.getElementById(content_id);
          $input.addEventListener('input', function(){
            var matchcounts = 0;
            var str='<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length > 1) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var content_index = [];
                var data_title = data.title.trim().toLowerCase();
                var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                var data_url = decodeURIComponent(data.url);
                var index_title = -1;
                var index_content = -1;
                var first_occur = -1;
                // only match artiles with not empty titles and contents
                if(data_title != '') {
                  keywords.forEach(function(keyword, i) {
                    index_title = data_title.indexOf(keyword);
                    index_content = data_content.indexOf(keyword);
                    if( index_title >= 0 || index_content >= 0 ){
                      isMatch = true;
                      if (i == 0) {
                        first_occur = index_content;
                      }
                    }

                  });
                }
                // show search results
                if (isMatch) {
                  matchcounts += 1;
                  str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                  var content = data.content.trim().replace(/<[^>]+>/g,"");
                  if (first_occur >= 0) {
                    // cut out 100 characters
                    var start = first_occur - 20;
                    var end = first_occur + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if(start == 0){
                      end = 50;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    var match_content = content.substring(start, end);
                    // highlight all keywords
                    keywords.forEach(function(keyword){
                      var regS = new RegExp(keyword, "gi");
                      match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                    });

                    str += "<p class=\"search-result\">" + match_content +"...</p>"
                  }
                  str += "</li>";
                }
              })};
            str += "</ul>";
            if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
            if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
            $resultContent.innerHTML = str;
          });
          proceedsearch();
        }
      });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
  <script>AV.initialize("fgplu58hnb8VHcpyhwGRImYX-gzGzoHsz", "GQ7t1KolkJ50r7tPqibJxpq5");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>


  


  

</body>
</html>
